<template>
    <div class="shopcart" @click="changeVisible" v-show="visible" >
        <!-- 购物车标题 -->
        <div class="content" @click.stop="handleClick">
            <div class="title">
                <span>已选商品</span>
                <span @click="clearshopcart">清空</span>
            </div>
            <!-- 购物车列表 -->
            <div class="list" v-if="shopCartList.length !=0">
                <div class="good" v-for="(item,index) in shopCartList" :key="index">
                    <div class="imgbox">
                        <img :src="item.picture" alt="">
                    </div>
                    <div class="text">
                        <div class="name">{{item.name}}</div>
                        <div class="price">
                            <div class="goodPrice">￥{{item.min_price}}</div>
                            <div>
                                <span @click="shopSub(index)">-</span>
                                <span>{{item.count}}</span>
                                <span @click="shopAdd(index)">+</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="empty">购物车空空如也，去逛逛！</div>
        </div>
    </div>
</template>

<script>
//  导入vuex中的工具函数(辅助函数)，使用该工具函数，简化vuex在组件中的应用
import {mapState,mapMutations} from 'vuex'
export default {
    data(){
        return{
            visible:false,
        }
    },
    methods:{//将vuex中的方法映射到组件中
        ...mapMutations(['shopAdd','shopSub','clearshopcart']),
        changeVisible(){
            this.visible=!this.visible; //让购物车显示/隐藏
        },
        handleClick(){

        }
    },
    computed:{ //计算属性  将vuex中的数据映射到组件中
        ...mapState(['shopCartList','goodcount']),
    }
}
</script>

<style >
    .content{
        position: absolute;
        bottom: 0;
        background: white;
        width: 100%;padding: 10px;
        box-sizing: border-box;
    }
    .content .title{
        display: flex;
        justify-content: space-between;
        font-weight: bold;
    }
    .content .list .good{
        display: flex;
        margin: 20px 0;
    }
    .content .list .good .imgbox{
        width: 80px;
        margin-right: 10px;
    }
    .content .list .good .imgbox img{
        width: 100%;
    }
    .content .list .good .text{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .content .list .good .text .name{
        font-weight: bold;
    }
    .content .list .good .text .price{
        display: flex;
        justify-content: space-between;
    }
    .content .list .good .text .price .goodPrice{
        color: red;
    
    }
    .content .list .good .text .price span{
        display: inline-block;
        width: 14px;
        height: 14px;
        text-align: center;
        margin-left: 5px;
        line-height: 14px;
        color: white;
        border-radius: 50%;
        border: 1px solid rgb(72, 180, 247);
        color:rgb(72, 180, 247); 

    }
    .content .list .good .text .price span:nth-child(2){
      border: none;
      color: black;
    }
    .content .list .good .text .price span:nth-child(3){
       background:rgb(72, 180, 247);  
        color: white;
    }
    .empty{
        text-align: center;
        padding: 50px;
    }
</style>